<template>
  <div class="course-wrap">
    <div class="main-content">
            <div class="tab-zb">
              <div class="tab-zb-l">
                <span v-for="(item,i) in confs.channel" :key="'channel' + i" :class="{active: i.replace('a','') === query.channel}" @click="handleTabCourse(i, 'channel')" >{{item}}</span>
              </div>
              <div class="tab-zb-r">
                <span v-for="(item,i) in confs.is_end" :key="'is_end' + i" :class="{on: i === query.is_end}" @click="setQuery('is_end', i)" >
                  <em>{{item}}</em>
                </span>
              </div>
            </div>
            <all-class :courseTab="courseTab" page="1" ref="classList" />
            <!-- <no-class v-if="isNone" /> -->
          </div>
  </div>
</template>
<script>
import allClass from './allClass.vue'
export default {
  name: 'course',
  components: {
    'all-class': allClass
  },
  data () {
    return {
      query: {
        is_end: '0',
        channel: ''
      },
      confs: {
        channel: { 'a': '全部', '0a': '一对一', '1a': '小班课', '2a': '直播课', '3a': '录播课' },
        is_end: { '0': '默认', '1': '已结束' }
      },
      courseTab: 0,
      isNone: false
    }
  },
  mounted () {
    this.$refs.classList.setQuery(this.query)
  },
  methods: {
    handleTabCourse (type, qk) {
      type = type.replace('a', '')
      this.courseTab = Number(type)
      this.setQuery(qk, type)
      this.setQuery('page', 1)
    },
    setQuery (key, val) {
      let query = {}
      query[key] = val
      this.query = Object.assign({}, this.query, query)
      this.$refs.classList.setQuery(this.query)
    }
  }
}
</script>
<style lang="less" scoped>
.tab-zb {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #C1C1C1;
            &-l {
              padding-left: 20px;
            }
            &-r {
              display: flex;
              align-items: center;
              height: 29px;
              .on {
                background-color: #27BFA3;
                em {
                  color: #fff;
                }
              }
              span {
                display: block;
                width: 60px;
                height: 29px;
                line-height:27px;
                text-align: center;
                border: 1px solid #27BFA3;
                border-radius: 0 6px 6px 0;
                cursor: pointer;
                &:first-child {
                  border-radius: 6px 0 0 6px;
                  em {
                    padding-left: 2px;
                  }
                }
                em {
                  font-style: normal;
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #27BFA3;
                  padding-left: 1px;
                }
              }
            }
          }
          .tab-zb-l {
            display: flex;
            align-items: center;
            .active {
              position: relative;
              color: #07997F;
              &::after {
                display: block;
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -1px;
                width: 30px;
                height: 2px;
                background: #07997F;
              }
            }
            span {
              display: block;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              line-height: 48px;
              color: #333333;
              margin-right: 40px;
              cursor: pointer;
            }
          }
</style>
